<template>
	<view class="pl-main-box">
		<view class="pl-back-box" @click="returnBack()">
			<text class="back-text">密码登录</text>
			<icon class="back-icon" type="cancel"></icon>
		</view>
		<view class="pl-form-box">
			<view class="form-input">
				<text class="from-text">手机号：</text>
				<input v-model="loginData.phone" class="input" focus placeholder="请输入账号" />
			</view>
			<view class="form-input">
				<text class="from-text">密码：</text>
				<input v-model="loginData.password" class="input" password focus placeholder="请输入密码" />
			</view>
		</view>
		<button class="pl-login-button" @click="login()">登录</button>
	</view>
</template>

<script>
	import {
		postRequest
	} from '../../utils/request.js';
	import {
		errorMessage,
		successMessage,
		warningMessage
	} from '../../utils/message';
	import {
		checkPassword,
		checkPhone
	} from '../../utils/utils.js';
	export default {
		data() {
			return {
				loginData: {
					phone: '',
					password: ''
				}

			}
		},
		methods: {
			login() {
				if (!checkPhone(this.loginData.phone)) {
					warningMessage("请输入有效的手机号！")
					return false;
				}
				if (!this.loginData.password === '123456') {
					if (!checkPassword(this.loginData.password)) {
						warningMessage("密码必须至少包含两种字符（大写字母、小写字母、数字、特殊字符），并且长度至少为6位")
						return false;
					}
				}
				postRequest('/user/login/password', this.loginData).then(res => {
					if (res.code === '200') {
						uni.setStorageSync("token", res.data.token)
						uni.reLaunch({
							url: '/pages/content/home/home' // 登录页面路径
						});
					} else {
						errorMessage(res.msg)
					}
				}).catch(err => {
					errorMessage('系统出错了！')
					console.log(err)
				})
			},
			// 返回
			returnBack() {
				this.$emit("closeDialog");
			}
		}
	}
</script>

<style lang="scss">
	.pl-main-box {
		width: 100%;
		height: 100%;
		/* 使用 rgba() 设置背景颜色透明度 */
		background-color: rgba(162, 241, 251, 0.7);
		/* 添加边框 */
		border: 1px solid #fafafa;
		border-radius: 10px;

		.pl-back-box {
			width: 100%;
			height: 10%;

			.back-text {
				position: relative;
				font-size: 20px;
				font-weight: bold;
				font-family: 宋体;
				left: 250rpx;
				top: 60rpx;
			}

			.back-icon {
				float: right;
				margin-top: 10px;
				margin-right: 10px;
			}
		}

		.pl-form-box {
			position: relative;
			width: 80%;
			height: 50%;
			left: 50%;
			transform: translate(-50%);
			top: 40px;
			background-color: white;
			border-radius: 10px;

			.form-input {
				display: flex;
				position: relative;
				width: 80%;
				height: 40px;
				margin: 20rpx;
				padding: 5rpx;
				top: 90rpx;
				left: 45%;
				transform: translate(-50%);

				.from-text {
					display: inline-block;
					position: relative;
					width: 150rpx;
					/* 使用justify来实现所有字中间等间距显示 */
					text-align: justify;
					align-items: center;

					::after {
						content: "";
						display: inline-block;
						width: 100%;
					}

				}

				.input {
					width: 300rpx;
					background-color: #87CEFA;
					padding: 4rpx;
					padding-left: 20rpx;
					border-radius: 10rpx;
					;
				}

			}
		}

		.pl-login-button {
			background-color: #3dbff6;
			width: 40%;
			position: relative;
			top: 120rpx;
		}
	}
</style>